<template>
	<view class="search-container">
		<!-- 顶部搜索栏 -->
		<view class="search-header">
			<view class="search-bar">
				<uni-icons type="search" size="26" color="#999" class="search-icon" />
				<input class="search-input" v-model="searchText" placeholder="Search movies, series" @input="onSearchInput"
					@confirm="doSearch" />
				<view v-if="searchText" class="clear-btn" @tap="clearSearch">
					<uni-icons type="clear" size="22" color="#999" />
				</view>
			</view>
			<view class="cancel-btn" @tap="navigateBack">Cancel</view>
		</view>

		<!-- 搜索历史 -->
		<view v-if="showHistory && !isSearching" class="history-section">
			<view class="history-header">
				<view class="history-title">Search History</view>
				<view class="history-clear" @tap="clearHistory">
					<uni-icons type="trash" size="24" color="#999" />
				</view>
			</view>
			<view class="history-tags">
				<view v-for="(item, index) in searchHistory" :key="index" class="history-tag" @tap="searchByTag(item)">
					{{ item }}
				</view>
			</view>
		</view>

		<!-- 热门搜索 -->
		<view v-if="!isSearching && !showHistory && !searchText" class="hot-section">
			<view class="hot-title">Hot Searches</view>
			<view class="hot-list">
				<view v-for="(item, index) in hotSearches" :key="index" class="hot-item" @tap="searchByTag(item.text)">
					<view class="hot-rank" :class="getRankClass(index)">{{ index + 1 }}</view>
					<view class="hot-text">{{ item.text }}</view>
					<view v-if="item.icon" class="hot-icon">{{ item.icon }}</view>
				</view>
			</view>
		</view>

		<!-- 搜索结果 -->
		<view v-if="isSearching" class="result-section">
			<!-- 筛选标签 -->
			<scroll-view scroll-x class="filter-scroll" show-scrollbar="false">
				<view class="filter-list">
					<view v-for="(filter, index) in filterTags" :key="index"
						:class="['filter-item', currentFilter === index ? 'active' : '']" @tap="onFilterChange(index)">
						{{ filter }}
					</view>
				</view>
			</scroll-view>

			<!-- 视频列表 -->
			<view v-if="searchResults.length > 0" class="video-grid">
				<view v-for="item in searchResults" :key="item.id" class="video-item" @tap="handlePlayer(item)">
					<view class="video-cover-wrap">
						<image :src="item.cover" class="video-cover" mode="aspectFill" />
						<view class="video-play"><uni-icons type="play-filled" size="32" color="#fff" /></view>
						<view class="video-type">{{ item.type }}</view>
						<view v-if="item.duration" class="video-duration">{{ item.duration }}</view>
					</view>
					<view class="video-title">{{ item.title }}</view>
					<view class="video-info">
						<view class="video-rating">
							<uni-icons type="star-filled" size="16" color="#FF6A00" />
							<text>{{ item.rating || 'No Rating' }}</text>
						</view>
						<view class="video-date">{{ item.releaseDate || '' }}</view>
					</view>
				</view>
			</view>

			<!-- 无结果提示 -->
			<view v-else class="no-result">
				<uni-icons type="search" size="64" color="#ddd" />
				<view class="no-result-text">No content found</view>
				<view class="no-result-tip">Try other keywords</view>
			</view>

			<!-- 加载更多 -->
			<view v-if="hasMore" class="load-more" @tap="loadMore">
				Load more...
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchText: '',
			showHistory: true,
			isSearching: false,
			searchHistory: ['Love', 'Sci-Fi', 'Mystery', 'Animation'],
			hotSearches: [
				{ text: 'Mars Stone', icon: '🔥' },
				{ text: 'Interstellar', icon: '' },
				{ text: 'The Wandering Earth', icon: '' },
				{ text: 'Avengers', icon: '' },
				{ text: 'The Matrix', icon: '' },
				{ text: 'Inception', icon: '' },
				{ text: 'Harry Potter', icon: '' }
			],
			filterTags: ['综合排序', '最新上线', '评分最高', '最多播放'],
			currentFilter: 0,
			searchResults: [],
			page: 1,
			hasMore: true
		}
	},
	onLoad() {
		// 从本地存储获取搜索历史
		const history = uni.getStorageSync('searchHistory');
		if (history) {
			this.searchHistory = history;
		}
	},
	methods: {
		// 返回上一页
		navigateBack() {
			uni.navigateBack();
		},

		// 清除搜索框
		clearSearch() {
			this.searchText = '';
			this.isSearching = false;
			this.showHistory = true;
		},

		// 搜索输入
		onSearchInput() {
			// 可以在这里实现实时搜索建议
		},

		// 执行搜索
		doSearch() {
			if (!this.searchText.trim()) return;

			// 添加到搜索历史
			this.addToHistory(this.searchText.trim());

			// 开始搜索
			this.isSearching = true;
			this.showHistory = false;
			this.page = 1;
			this.searchResults = [];

			// 模拟搜索结果
			this.simulateSearchResults();
		},

		// 通过标签搜索
		searchByTag(tag) {
			this.searchText = tag;
			this.doSearch();
		},

		// 添加到搜索历史
		addToHistory(keyword) {
			// 去重
			const index = this.searchHistory.indexOf(keyword);
			if (index > -1) {
				this.searchHistory.splice(index, 1);
			}
			// 添加到开头
			this.searchHistory.unshift(keyword);
			// 最多保存10条
			if (this.searchHistory.length > 10) {
				this.searchHistory.pop();
			}
			// 保存到本地存储
			uni.setStorageSync('searchHistory', this.searchHistory);
		},

		// 清除搜索历史
		clearHistory() {
			uni.showModal({
				title: '提示',
				content: '确定要清除所有搜索历史吗？',
				confirmText: '确定',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						this.searchHistory = [];
						uni.removeStorageSync('searchHistory');
					}
				}
			});
		},

		// 筛选切换
		onFilterChange(index) {
			this.currentFilter = index;
			// 重新搜索
			this.page = 1;
			this.searchResults = [];
			this.simulateSearchResults();
		},

		// 加载更多
		loadMore() {
			if (!this.hasMore) return;
			this.page++;
			this.simulateSearchResults(true);
		},

		// 跳转到播放器
		handlePlayer(item) {
			uni.navigateTo({
				url: '/pages/player/player?id=' + item.id
			});
		},

		// 获取排名样式类
		getRankClass(index) {
			if (index === 0) return 'first';
			if (index === 1) return 'second';
			if (index === 2) return 'third';
			return '';
		},

		// 模拟搜索结果
		simulateSearchResults(isLoadMore = false) {
			// 模拟数据
			const mockResults = [
				{
					id: 1,
					cover: '/static/hot/1.png',
					title: 'Mars Stone: Interstellar Journey',
					rating: '9.2',
					duration: '120 min',
					type: 'Sci-Fi',
					releaseDate: '2023-08-15'
				},
				{
					id: 2,
					cover: '/static/hot/2.png',
					title: 'Mars Stone: Unknown World',
					rating: '8.8',
					duration: '98 min',
					type: 'Adventure',
					releaseDate: '2023-09-20'
				},
				{
					id: 3,
					cover: '/static/hot/3.png',
					title: 'Mars Stone: Traces of Civilization',
					rating: '9.0',
					duration: '112 min',
					type: 'Documentary',
					releaseDate: '2023-10-05'
				},
				{
					id: 4,
					cover: '/static/hot/4.png',
					title: 'Mars Stone: Survival Challenge',
					rating: '8.5',
					duration: '105 min',
					type: 'Reality Show',
					releaseDate: '2023-11-12'
				}
			];

			// 模拟网络延迟
			setTimeout(() => {
				if (isLoadMore) {
					this.searchResults.push(...mockResults);
				} else {
					this.searchResults = mockResults;
				}

				// 模拟没有更多数据
				if (this.page > 3) {
					this.hasMore = false;
				}
			}, 500);
		}
	}
}
</script>

<style lang="scss" scoped>
.search-container {
	background: #121212;
	min-height: 100vh;
	padding-bottom: 20rpx;
}

/* 顶部搜索栏 */
.search-header {
	display: flex;
	align-items: center;
	padding: 18rpx 32rpx;
	background: #1e1e1e;
	border-bottom: 1rpx solid #333;
	position: sticky;
	top: 0;
	z-index: 10;

	.search-bar {
		flex: 1;
		height: 70rpx;
		background: #2d2d2d;
		border-radius: 35rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		position: relative;

		.search-icon {
			margin-right: 12rpx;
		}

		.search-input {
			flex: 1;
			height: 100%;
			background: transparent;
			border: none;
			font-size: 30rpx;
			color: #ccc;
		}

		.clear-btn {
			margin-left: 12rpx;
			padding: 4rpx;
		}
	}

	.cancel-btn {
		margin-left: 24rpx;
		color: #FE2B54;
		font-size: 32rpx;
	}
}

/* 搜索历史 */
.history-section {
	background: #1e1e1e;
	margin: 20rpx 0;
	padding: 32rpx;

	.history-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;

		.history-title {
			font-size: 32rpx;
			color: #fff;
			font-weight: 500;
		}

		.history-clear {
			padding: 8rpx;
		}
	}

	.history-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;

		.history-tag {
			padding: 12rpx 24rpx;
			background: #2d2d2d;
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #ccc;
			white-space: nowrap;

			&:active {
				background: #3d3d3d;
			}
		}
	}
}

/* 热门搜索 */
	.hot-section {
		background: #1e1e1e;
		margin: 20rpx 0;
		padding: 32rpx;

		.hot-title {
			font-size: 32rpx;
			color: #fff;
			font-weight: 500;
			margin-bottom: 24rpx;
		}

		.hot-list {

			.hot-item {
				display: flex;
				align-items: center;
				padding: 24rpx 0;
				border-bottom: 1rpx solid #333;

				&:last-child {
					border-bottom: none;
				}

				.hot-rank {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					font-weight: bold;
					color: #666;
					margin-right: 24rpx;

					&.first {
						color: #FE2B54;
					}

					&.second {
						color: #FF6A00;
					}

					&.third {
						color: #FFD700;
					}
				}

				.hot-text {
					flex: 1;
					font-size: 30rpx;
					color: #ccc;
				}

				.hot-icon {
					font-size: 28rpx;
					margin-left: 12rpx;
				}
			}
		}
	}

	/* 搜索结果 */
	.result-section {
		/* 筛选标签 */
		.filter-scroll {
			overflow-x: scroll;
			background: #1e1e1e;
			padding: 0 32rpx;
			margin-bottom: 20rpx;
			white-space: nowrap;
		}

		.filter-list {
			display: inline-flex;
			align-items: center;
			gap: 40rpx;
			padding: 24rpx 0;

			.filter-item {
				font-size: 30rpx;
				color: #666;
				white-space: nowrap;
				position: relative;

				&.active {
					color: #FE2B54;
					font-weight: 500;

					&::after {
						content: '';
						position: absolute;
						bottom: -24rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 24rpx;
						height: 6rpx;
						background: #FE2B54;
						border-radius: 3rpx;
					}
				}
			}
		}

		/* 视频网格 */
		.video-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 28rpx 20rpx;
			padding: 0 32rpx;
		}

		.video-item {
			width: 335rpx;
			display: flex;
			flex-direction: column;
			position: relative;
		}

		.video-cover-wrap {
			position: relative;
			width: 100%;
			aspect-ratio: 16/9;
			border-radius: 8rpx;
			overflow: hidden;

			.video-cover {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 8rpx;
			}

			.video-play {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background: rgba(0, 0, 0, 0.38);
				border-radius: 50%;
				padding: 10rpx;
				z-index: 2;
			}

			.video-type {
				position: absolute;
				right: 12rpx;
				top: 12rpx;
				background: #FE2B54;
				color: #fff;
				font-size: 22rpx;
				border-radius: 18rpx;
				padding: 0 16rpx;
				z-index: 2;
			}

			.video-duration {
				position: absolute;
				right: 12rpx;
				bottom: 12rpx;
				background: rgba(0, 0, 0, 0.6);
				color: #fff;
				font-size: 22rpx;
				border-radius: 12rpx;
				padding: 0 12rpx;
				z-index: 2;
			}
		}

		.video-title {
			font-size: 28rpx;
			color: #fff;
			margin: 12rpx 0 6rpx 0;
			font-weight: 500;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.video-info {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.video-rating {
				display: flex;
				align-items: center;
				color: #FF6A00;
				font-size: 24rpx;
				font-weight: 500;
				gap: 6rpx;
			}

			.video-date {
				color: #666;
				font-size: 22rpx;
			}
		}

		/* 无结果提示 */
		.no-result {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 100rpx 0;

			.no-result-text {
				font-size: 32rpx;
				color: #fff;
				margin: 24rpx 0 12rpx 0;
			}

			.no-result-tip {
				font-size: 28rpx;
				color: #666;
			}
		}

		/* 加载更多 */
		.load-more {
			text-align: center;
			padding: 32rpx 0;
			color: #666;
			font-size: 28rpx;
		}
	}
</style>